﻿body
{
    font-family: 'Segoe UI', sans-serif
}

span {
    font-style: italic
}

table {
    border: 1px solid black;
    min-width: 20%;
    min-height: 20%;
}

td, th {
    border: 1px solid black;
    margin: 5px;
    padding: 5px;
}

div {
	min-height: 50px;
}

.hidden {
	display: none;
}

.automaton-visualizer {
	background-color: #222;
	min-height: 600px;
	width: 100%;
}

.automaton-container {
	float: left;
}

.zoom-out {
	-moz-transform-origin: left top;
	-ms-transform-origin: left top;
	-o-transform-origin: left top;
	-webkit-transform-origin: left top;
	transform-origin: left top;
	-webkit-transform: scale(0.3, 0.3);
	-moz-transform: scale(0.3, 0.3);
	-ms-transform: scale(0.3, 0.3);
	-o-transform: scale(0.3, 0.3);
	transform: scale(0.3, 0.3);
}

.zoom-in {
	-moz-transform: none;
	-ms-transform: none;
	-o-transform: none;
	-webkit-transform: none;
	transform: none;
}

.border-clear {
	border: none;
}

.accepted {
	border: 0.5em solid green;
}

.rejected {
	border: 0.5em solid red;
}

.selected {
	border: 0.5em solid blue;
}

.overlay {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	opacity: 0.4;
	background-color: gray;

}

	.overlay * {
		background-color: none;
		opacity: 1;
		-moz-transform: scale(5);
		-ms-transform: scale(5);
		-o-transform: scale(5);
		-webkit-transform: scale(5);
		transform: scale(5);
		position: absolute;
		top: 40%;
		left: 0%;
		right: 0%;
	}
